// 空间
import { Button, Select, Input, Form, Checkbox, Divider, Table, Modal, Drawer, Tabs, Switch, Pagination } from 'antd'
import React
, { useState, useEffect } from 'react'

import '../../assets/css/Interspace.css'
//新建空间保存成功
import success from '../../assets/images/saveSuccess.png'
//tab切换图片
import weitu from '../../assets/images/weitu.png'
import { UpOutlined, FormOutlined, DeleteOutlined, DownOutlined, RightOutlined, CloseCircleOutlined } from '@ant-design/icons'
import { spaceData, delSpace, AddSpace } from '../../api/space'

export default function Interspace() {
  const [form] = Form.useForm();
  //导入表格数据
  let [dataSource, setDataSource] = useState([])
  //点击编辑后
  let [specificInfo, setSpecificInfo] = useState({})
  const columns = [
    {
      title: '名称',
      dataIndex: 'rootNum',
      key: 'rootNum',
    },
    {
      title: '楼宇',
      dataIndex: 'buildings',
      key: 'buildings',
    },
    {
      title: '楼层',
      dataIndex: 'floor',
      key: 'floor',
    },
    {
      title: '面积(㎡)',
      dataIndex: 'squareMeter',
      key: 'squareMeter',
    },
    {
      title: '装修',
      dataIndex: 'fitment',
      key: 'fitment',
    },
    {
      title: '朝向',
      dataIndex: 'orientation',
      key: 'orientation',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (row) => {
        return <Switch checkedChildren="上架中" unCheckedChildren="已下架" defaultChecked value={row == '已下架' ? false : true} style={row == '已下架' ? { color: "color: #75C476 !important" } : ''} />
      }
    },
    {
      title: '操作',
      render: (row) => {
        return <div className="yoperation">
          <FormOutlined style={{ color: '#8479e3', fontSize: '14px', marginRight: '20px' }} onClick={() => {
            setInfo(true)
            setSpecificInfo({ ...row })
          }} />
          <DeleteOutlined style={{ color: '#f97272', fontSize: '14px' }} onClick={() => {
            Modal.confirm({
              title: '您确定要删除吗',
              okText: '确认',
              cancelText: '取消',
              onOk: () => {
                delData(row.id)
              }

            })
          }} />
        </div>
      }
    },
  ];
  //是否上架
  let [isListed, setListed] = useState(false)
  //tab切换
  let tablist = ['定价', '租控', '租约', '账单',]
  //tab是否激活
  let [tabActive, setActive] = useState(0)
  //打开新建空间
  let [openNew, setOpenNew] = useState(false)
  //
  let [newSpace, setNewSpace] = useState()
  //是否收起筛选
  let [screen, setScreen] = useState(false)
  //保存成功后的modal
  let [saveSuccess, setSave] = useState(false)
  //保存成功后的modal 点击 编辑租金
  let [compileRent, setRent] = useState(false)
  //点击table编辑
  let [detailInfo, setInfo] = useState(false)
  //数据总条数
  let [total, setTotal] = useState({
    total: ''
  })
  //新建空间
  let [spaceInfo, setSpaceInfo] = useState({
    id: Date.now(),
    rootNum: '',
    buildings: '',
    floor: '',
    squareMeter: "",
    fitment: ''
  })
  //点击table删除
  function delData(id) {
    console.log(id);
    //删除请求
    delSpace(id).then(res => {
      console.log('111111');

    })
    spaceData().then(res => {
      let data = res.data
      setDataSource([...data.data])
    })

  }
  //请求数据
  useEffect(() => {
    spaceData().then(res => {
      let data = res.data

      console.log(data);
      setDataSource([...data.data])
      let t = total
      t.total = data.total
      setTotal({ ...t })
      console.log('111', total);
    })
  }, [])

  const handleChange = (e) => {
    let info = spaceInfo
    info.rootNum = e.target.value
    setSpaceInfo({ ...info })
    console.log(spaceInfo);
  }
  //选择楼宇
  const addBuildings = (e) => {
    let info = spaceInfo
    info.buildings = e
    setSpaceInfo({ ...info })
    console.log(spaceInfo);
  }
  //选择楼层
  const addFloor = (e) => {
    let info = spaceInfo
    info.floor = e
    setSpaceInfo({ ...info })
    console.log(spaceInfo);
  }
  //填写面积
  const fillInArea = (e) => {
    let info = spaceInfo
    info.squareMeter = e.target.value
    setSpaceInfo({ ...info })
    console.log(spaceInfo);
  }
  //选择装修类型
  const chooseFitment = (e) => {
    let info = spaceInfo
    info.fitment = e
    setSpaceInfo({ ...info })
    console.log(spaceInfo);
  }
  //选择朝向
  const chooseOrientation = (e) => {
    let info = spaceInfo
    info.orientation = e
    setSpaceInfo({ ...info })
    console.log(spaceInfo);
  }

  return (
    <>

      <div className="yspace">
        <div className="ycontainer">

          <div className="yheader">
            <Button type='primary' onClick={() => {
              setOpenNew(true)
            }}>新建空间</Button>
            {/* 新建空间Modal*/}
            <Modal title="新建空间" open={openNew} onOk={() => {
              setOpenNew(false)
            }} onCancel={() => {
              setOpenNew(false)
            }} footer={null}>
              <div className="ycontent" style={{
                borderTop: ' 1px solid #DBDEE3',
              }}>
                <Form value={newSpace} onFinish={() => {
                  //保存成功后重新获取数据
                  spaceData().then(res => {
                    let data = res.data
                    console.log(data);

                    setDataSource([...data.data])
                  })
                  setSave(true)
                }} >
                  <div className="yspace-name">
                    <div className="ytitle" style={{
                      padding: '10px 0'
                    }}>
                      空间名称
                    </div>
                    <Form.Item rules={{

                    }}>
                      <Input placeholder='请输入' value={spaceInfo.rootNum} onChange={(e) => {
                        // let root = e.target.value

                        // setRootNum(root)
                        // console.log(rootNum);
                        handleChange(e)
                      }} />
                    </Form.Item>
                  </div>
                  <div className="ybuliding-floor" style={{
                    display: 'flex', justifyContent: "space-between", borderBottom: ' 1px dotted #DBDEE3',
                    paddingBottom: '20px'
                  }}>
                    <div className="ybuliding" style={{ marginRight: '20px', }}>

                      <div className="ytitle" >
                        所属楼宇
                      </div>
                      <Select placeholder='请选择' style={{ width: '206px', height: '32px' }} onSelect={(e) => {
                        // console.log(e);

                        addBuildings(e)
                        // let info = { ...spaceInfo }
                        // info.buildings = e
                        // setSpaceInfo({ ...info })
                        // console.log(spaceInfo);

                      }}>
                        <Select.Option value='国贸一期A座'>
                          国贸一期A座
                        </Select.Option>
                        <Select.Option value='国贸一期B座'>
                          国贸一期B座
                        </Select.Option>
                        <Select.Option value='国贸一期C座' >
                          国贸一期C座
                        </Select.Option>
                      </Select>
                    </div>
                    <div className="yfloor">
                      <div className="ytitle">
                        所属楼层
                      </div>
                      <Select placeholder='请选择' style={{ width: '206px', height: '32px' }} onSelect={(e) => {
                        // console.log(e);
                        addFloor(e)
                        // let info = { ...spaceInfo }
                        // info.floor = e
                        // setSpaceInfo({ ...info })
                        // console.log(spaceInfo);

                      }}>
                        <Select.Option value=' 1层'>
                          1层
                        </Select.Option>
                        <Select.Option value=' 2层'>
                          2层
                        </Select.Option>
                        <Select.Option value=' 3层' >
                          3层
                        </Select.Option>
                      </Select>
                    </div>
                  </div>

                  <div className="yarea">
                    <div className="ytitle" style={{
                      padding: '10px 0'
                    }}>
                      面积(㎡)
                    </div>
                    <Form.Item>
                      <Input placeholder='请输入' value={spaceInfo.squareMeter} onChange={(e) => {
                        fillInArea(e)
                        // console.log(spaceInfo);

                      }} />
                    </Form.Item>
                  </div>

                  <div className="yfitment-orientation" style={{
                    display: 'flex',
                    justifyContent: "space-between",
                    paddingBottom: "20px"
                  }}>
                    <div className="ybuliding" style={{ marginRight: '20px' }}>
                      <div className="ytitle" >
                        装修
                      </div>
                      <Select placeholder='请选择' style={{ width: '206px', height: '32px' }} onSelect={(e) => {
                        chooseFitment(e)
                      }}>
                        <Select.Option value=' 精装'>
                          精装
                        </Select.Option>
                        <Select.Option value=' 简装'>
                          简装
                        </Select.Option>
                        <Select.Option value=' 毛胚' >
                          毛胚
                        </Select.Option>
                      </Select>
                    </div>
                    <div className="yfloor">
                      <div className="ytitle">
                        朝向
                      </div>
                      <Select placeholder='请选择' style={{ width: '206px', height: '32px' }} onSelect={(e) => {
                        chooseOrientation(e)
                      }}>
                        <Select.Option value=' 东'>
                          东
                        </Select.Option>
                        <Select.Option value=' 南'>
                          南
                        </Select.Option>
                        <Select.Option value=' 西' >
                          西
                        </Select.Option>
                        <Select.Option value=' 北'>
                          北
                        </Select.Option>
                        <Select.Option value=' 东北'>
                          东北
                        </Select.Option>
                        <Select.Option value=' 东南' >
                          东南
                        </Select.Option>
                        <Select.Option value=' 西北'>
                          西北
                        </Select.Option>
                        <Select.Option value=' 西南'>
                          西南
                        </Select.Option>
                      </Select>
                    </div>
                  </div>
                  <div className="yremark">
                    <div className="ytitle">
                      空间备注
                    </div>
                    <Form.Item>
                      <Input.TextArea autoSize={{ minRows: 3, maxRows: 5 }} value={spaceInfo.remark} onChange={(e) => {
                        setSpaceInfo({ ...spaceInfo, remark: e.target.value })
                        // console.log(spaceInfo);

                      }} />
                    </Form.Item>
                  </div>
                  <Button type='primary' style={{ background: "#8479E3", width: '120px', height: '36px', display: 'block', margin: '0 auto' }} onClick={() => {
                    // 添加数据
                    let item = spaceInfo
                    // console.log(item);
                    AddSpace(item).then(res => {
                      console.log(res);
                    })
                    setOpenNew(false)


                  }} htmlType="submit" >保存</Button>
                </Form>

              </div>


            </Modal>
            {/* 新建空间成功后的modal */}
            <Modal open={saveSuccess} footer={null} onCancel={() => {
              setSave(false)
            }} width='308px'>
              <img src={success} alt="" style={{ width: "168px", height: '110px', display: 'block', margin: '20px auto' }} />
              <div className="yspacename" style={{
                fontSize: '14px',
                color: '#000000',
                textAlign: 'center',
                marginBottom: '30px'
              }}>
                国贸一期A座3层301空间创建成功!
              </div>
              <div className="compile-rent" style={{
                fontSize: '14px',
                color: '#8479E3',
                textAlign: 'center'
              }} onClick={() => {
                setRent(true)
                setSave(false)
              }}>
                编辑单位租金<RightOutlined />
              </div>
            </Modal>
            {/* 点击 编辑单位租金 的modal*/}
            <Modal open={compileRent} onCancel={() => {
              setRent(false)
            }} footer={null} width='480px' title="空间单位租金">
              <div className="ycontent">
                <Form.Item>
                  <Input placeholder='输入租金数额' style={{ width: "368px", height: '36px' }} />&nbsp;&nbsp;
                  <span>元/㎡.天</span>
                  <Checkbox style={{ marginTop: '15px' }}>
                    不含税
                  </Checkbox>
                </Form.Item>

                <Form.Item>

                  <Button type='primary' style={{ background: '#8479E3', width: '100%', height: "36px" }}

                  >保存</Button>
                </Form.Item>

              </div>

            </Modal>
          </div>
          {
            dataSource.length <= 0 ?

              < img src={weitu} alt="" style={{ display: 'block', margin: '50px auto 0' }} />
              :
              <div className="yform">
                {/* 筛选 */}
                <div className="ysearch">
                  <Form form={form}>
                    <div className="yform" >
                      <div className="yselect" style={screen ? { padding: '20px' } : { padding: '0' }} >
                        <Form.Item noStyle>
                          <Select placeholder='请选择楼宇' className='yselect-building' >
                            <Select.Option value='国贸一期A座'>
                              国贸一期A座
                            </Select.Option>
                            <Select.Option value='国贸一期B座'>
                              国贸一期B座
                            </Select.Option>
                            <Select.Option value='国贸一期C座'>
                              国贸一期C座
                            </Select.Option>
                          </Select>
                        </Form.Item>
                        <Form.Item noStyle>
                          <Select placeholder='请选择楼层' className='yselect-floor'>
                            <Select.Option value='国贸一期A座'>
                              一层
                            </Select.Option>
                            <Select.Option value='国贸一期B座'>
                              二层
                            </Select.Option>
                            <Select.Option value='国贸一期C座'>
                              三层
                            </Select.Option>
                          </Select>
                        </Form.Item>
                        <Form.Item noStyle>
                          <Input placeholder='请输入空间名称' className='yspace-name' />
                        </Form.Item>

                      </div>
                      <div className="ycenter" style={screen ? { height: '0' } : { height: 'auto' }}>
                        <div className="ystatus">
                          <div className="ytitle">
                            状态
                          </div>
                          <Form.Item >

                            <Checkbox.Group>

                              <Checkbox>
                                上架中
                              </Checkbox>
                              <Checkbox>
                                已上架
                              </Checkbox>
                            </Checkbox.Group>
                          </Form.Item>


                        </div>
                        <div className="yarea">
                          <div className="ytitle">
                            面积
                          </div>
                          <Form.Item>
                            <Input /> ㎡
                          </Form.Item>
                          <span>~</span>
                          <Form.Item>
                            <Input /> ㎡
                          </Form.Item>
                        </div>
                        <div className="yfitment">
                          <div className="ytitle">
                            装修
                          </div>
                          <Form.Item>
                            <Checkbox.Group>
                              <Checkbox value={1}>
                                毛胚
                              </Checkbox>
                              <Checkbox value={2}>
                                简装
                              </Checkbox>
                              <Checkbox value={3}>
                                精装
                              </Checkbox>
                            </Checkbox.Group>
                          </Form.Item>
                        </div>
                        <div className="yorientation">
                          <div className="ytitle">
                            朝向
                          </div>
                          <Form.Item>
                            <Checkbox.Group>
                              <Checkbox value='东'>
                                东
                              </Checkbox>
                              <Checkbox value='南'>
                                南
                              </Checkbox>
                              <Checkbox value='西'>
                                西
                              </Checkbox>
                              <Checkbox value='北'>
                                北
                              </Checkbox>
                              <Checkbox value='东南'>
                                东南
                              </Checkbox>
                              <Checkbox value='西南'>
                                西南
                              </Checkbox>
                              <Checkbox value='东北'>
                                东北
                              </Checkbox>
                              <Checkbox value='西北'>
                                西北
                              </Checkbox>
                            </Checkbox.Group>

                          </Form.Item>
                        </div>
                      </div>

                    </div>
                  </Form>


                  <div className="ydivider">
                    <Divider
                      style={{
                        borderColor: '#ECEFF3', margin: 0
                      }}
                    >
                      <Button style={{ background: ' #FBFBFD', borderRadius: '32px', fontSize: "12px", color: '#8479E3 ' }} onClick={() => {
                        setScreen(!screen)

                      }}>{screen ? <div><DownOutlined /> <span>打开筛选</span></div> : <div><UpOutlined /> <span>收起筛选</span></div>} </Button>
                    </Divider>
                  </div>
                  <div className="ybtn" style={screen ? { display: 'none' } : { display: 'block' }}>
                    <Button type='primary' style={{ marginRight: '20px' }}>查询</Button>
                    <Button type='primary' style={{ background: '#F0F1F9 ', color: '#999CB2' }} onClick={() => {
                      form.resetFields()
                    }}>重置</Button>
                  </div>
                </div>
                {/* table表格 */}
                <div className="ytable" >
                  <Table dataSource={dataSource} columns={columns} loading:true pagination={
                    {
                      total: total.total,
                      showTotal: (total) => {
                        console.log(total);
                        `共${total}页`
                      }
                    }
                  } />
                </div>
                {/* 打开table编辑 */}
                {detailInfo &&
                  <div className="ycompile" style={{ background: 'rgba(0,0,0,0.5)', width: "100%", height: '869px', position: 'absolute', top: '0', left: '0' }}>
                    <div className="ycontent" style={{ width: '720px', height: '100%', background: '#fff', position: 'absolute', top: "0", right: '0', borderRadius: '20px 0 0 20px', padding: '20px' }}>
                      {/* 关闭编辑页面 */}
                      <CloseCircleOutlined style={{
                        position: 'absolute', top: '20px', left
                          : '-40px', fontSize: '28px', color: ' rgba(255,255,255,0.50)'
                      }} onClick={() => {
                        setInfo(false)
                      }} />
                      {/* 编辑头部 */}
                      <div style={{ paddingBottom: '20px', display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid #DBDEE3 ' }}>
                        <div>
                          <span style={{ marginRight: '20px' }}>{specificInfo.buildings}</span>
                          <Switch checkedChildren="上架中" unCheckedChildren="已下架" defaultChecked value={specificInfo.status == '已下架' ? false : true} />
                        </div>
                        <div className="ybtn">
                          <span style={{ color: "#8479E3", marginRight: "20px", cursor: 'pointer' }}>编辑</span>
                          <span style={{ color: "#F97171", cursor: 'pointer' }} onClick={() => {
                            // let list = dataSource.filter(item => item.id !== specificInfo.id)
                            // setDataSource([...list])
                            Modal.confirm({
                              title: '您确定要删除吗',
                              okText: '确认',
                              cancelText: '取消',
                              onOk: () => {
                                delData(specificInfo.id)
                                setInfo(false)
                              }
                            })


                          }}>删除</span>
                        </div>
                      </div>
                      {/* table信息 */}
                      <div className="yintro" style={{ paddingBottom: '20px', borderBottom: '1px dotted #DBDEE3 ', padding: '5px 0' }}>
                        {/* 面积 装修 和 朝向 */}
                        <div className="yarea-fitment-orientation" style={{ padding: '20px 0', display: "flex" }}>
                          <div className="yarea" style={{ marginRight: '50px' }}>
                            <div className="ytext" style={{ marginBottom: '10px', color: "#9FA2AD", fontSize: '12px' }}>面积</div>
                            <div className="area-val" style={{ color: '#000', fontSize: "16px" }}>{specificInfo.squareMeter}</div>
                          </div>
                          <div className="yorientation" style={{ marginRight: '50px' }}>
                            <div className="ytext" style={{ marginBottom: '10px', color: "#9FA2AD", fontSize: '12px' }}>装修</div>
                            <div className="area-val" style={{ color: '#000', fontSize: "16px" }}>{specificInfo.fitment}</div>
                          </div>
                          <div className="yfitment" style={{ marginRight: '50px' }}>
                            <div className="ytext" style={{ marginBottom: '10px', color: "#9FA2AD", fontSize: '12px' }}>朝向</div>
                            <div className="area-val" style={{ color: '#000', fontSize: "16px" }}>{specificInfo.orientation}</div>
                          </div>
                        </div>
                        {/* 空间备注 */}
                        <div className="yspace-remark">
                          <div className="yspace-remark-title" style={{ color: '#9FA2AD ', fontSize: "12px" }}>
                            空间备注
                          </div>
                          <div className="con" style={{ lineHeight: '25px' }}>
                            国贸大厦与国贸展览中心、国贸商城、中国大饭店及国贸饭店、国贸公寓共同构成总建筑面积达五十
                            六万平方米的中国国际贸易中心。卓越的办公环境、先进的科技设施、完善的配套服务、优越的商业
                            氛围以及丰富的物业管理经验，令国贸写字楼成为众多国内外客户理所当然的至优之选。

                          </div>
                          <div className="ycreate-info" style={{ marginTop: '20px', fontSize: '14px', color: '#A0A0A0' }}>
                            <span style={{ marginRight: '10px' }}>创建人:</span>
                            <span >离明海</span>
                            <span style={{ margin: '0 10px 0 30px' }}> 创建时间:</span>
                            <span>2019-08-20 10:30:28</span>
                          </div>
                        </div>
                      </div>
                      {/* tab切换 */}
                      <div className="ytab" style={{ marginTop: "30px" }}>
                        <div className="ytablist">
                          {
                            tablist.map((item, index) => {
                              return <div className="ytabs" style={tabActive == index ? {
                                color: "#8479E3", borderRight: '1px solid #8479E3',
                              } : {}} onClick={() => {
                                setActive(index)
                              }} key={index}>{item}</div>
                            })
                          }
                        </div>

                        <div className="ytabcon">
                          <img src={weitu} alt="" style={{ width: "290px", height: "190px", display: 'block', margin: '0 auto' }} />
                          <div className="ytip" style={{ textAlign: 'center' }}>
                            即将上线
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                }
              </div>

          }

        </div >
      </div >
    </>
  )
}
